<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta name="generator" content="Hugo 0.82.0" />
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Columns#Columns help organize shorter pieces of content horizontally for readability.
{{&lt; columns &gt;}} &lt;!-- begin columns block --&gt; # Left Content Lorem markdownum insigne... &lt;---&gt; &lt;!-- magic separator, between columns --&gt; # Mid Content Lorem markdownum insigne... &lt;---&gt; &lt;!-- magic separator, between columns --&gt; # Right Content Lorem markdownum insigne... {{&lt; /columns &gt;}} Example#Left Content Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter!">
<meta name="theme-color" content="#FFFFFF"><meta property="og:title" content="" />
<meta property="og:description" content="Columns#Columns help organize shorter pieces of content horizontally for readability.
{{&lt; columns &gt;}} &lt;!-- begin columns block --&gt; # Left Content Lorem markdownum insigne... &lt;---&gt; &lt;!-- magic separator, between columns --&gt; # Mid Content Lorem markdownum insigne... &lt;---&gt; &lt;!-- magic separator, between columns --&gt; # Right Content Lorem markdownum insigne... {{&lt; /columns &gt;}} Example#Left Content Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter!" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://localhost:1313/docs/shortcodes/columns/" /><meta property="article:section" content="docs" />



<title>Columns | Xiaoxiao Wu</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.6c7c6446dfdee7c8c933e9bbc6e80ee3ed6c913b2a59519f2092c3c6a9d63e55.css" integrity="sha256-bHxkRt/e58jJM&#43;m7xugO4&#43;1skTsqWVGfIJLDxqnWPlU=">
<script defer src="/en.search.min.1c919962b8f7c33bf7618d6173806541a8c28ec6b6e45658308e719785f92a2b.js" integrity="sha256-HJGZYrj3wzv3YY1hc4BlQajCjsa25FZYMI5xl4X5Kis="></script>

<script defer src="/sw.min.6f6f90fcb8eb1c49ec389838e6b801d0de19430b8e516902f8d75c3c8bd98739.js" integrity="sha256-b2&#43;Q/LjrHEnsOJg45rgB0N4ZQwuOUWkC&#43;NdcPIvZhzk="></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
-->

  
</head>

<body dir="ltr">
  <input type="checkbox" class="hidden toggle" id="menu-control" />
  <input type="checkbox" class="hidden toggle" id="toc-control" />
  <main class="container flex">
    <aside class="book-menu">
      <div class="book-menu-content">
        
  <nav>
<h2 class="book-brand">
  <a href="/"><span>Xiaoxiao Wu</span>
  </a>
</h2>


<div class="book-search">
  <input type="text" id="book-search-input" placeholder="Search" aria-label="Search" maxlength="64" data-hotkeys="s/" />
  <div class="book-search-spinner hidden"></div>
  <ul id="book-search-results"></ul>
</div>











  



  
  <ul>
    
      
        <li class="book-section-flat" >
          
  
  

  
    <a href="https://localhost:1313/docs/example/" class="">Example Site</a>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="https://localhost:1313/docs/example/table-of-contents/" class="">Table of Contents</a>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="https://localhost:1313/docs/example/table-of-contents/with-toc/" class="">With ToC</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://localhost:1313/docs/example/table-of-contents/without-toc/" class="">Without ToC</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-4e46b01272d410b3a99461d79326ddf4" class="toggle"  />
    <label for="section-4e46b01272d410b3a99461d79326ddf4" class="flex justify-between">
      <a  class="">Collapsed</a>
      <span>▾</span>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="https://localhost:1313/docs/example/collapsed/3rd-level/" class="">3rd Level</a>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="https://localhost:1313/docs/example/collapsed/3rd-level/4th-level/" class="">4th Level</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
  </ul>

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li class="book-section-flat" >
          
  
  

  
    <span>Shortcodes</span>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="https://localhost:1313/docs/shortcodes/buttons/" class="">Buttons</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://localhost:1313/docs/shortcodes/columns/" class=" active">Columns</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://localhost:1313/docs/shortcodes/details/" class="">Details</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://localhost:1313/docs/shortcodes/expand/" class="">Expand</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://localhost:1313/docs/shortcodes/hints/" class="">Hints</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://localhost:1313/docs/shortcodes/katex/" class="">Katex</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://localhost:1313/docs/shortcodes/mermaid/" class="">Mermaid</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-d3fc1bf6d66cd84b896a0af9f40cb1d5" class="toggle"  />
    <label for="section-d3fc1bf6d66cd84b896a0af9f40cb1d5" class="flex justify-between">
      <a href="https://localhost:1313/docs/shortcodes/section/" class="">Section</a>
      <span>▾</span>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="https://localhost:1313/docs/shortcodes/section/page1/" class="">Page1</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://localhost:1313/docs/shortcodes/section/page2/" class="">Page2</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://localhost:1313/docs/shortcodes/tabs/" class="">Tabs</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
  </ul>











  
<ul>
  
  <li>
    <a href="/posts/" >
        Blog
      </a>
  </li>
  
  <li>
    <a href="https://github.com/alex-shpak/hugo-book" target="_blank" rel="noopener">
        Github
      </a>
  </li>
  
  <li>
    <a href="https://themes.gohugo.io/hugo-book/" target="_blank" rel="noopener">
        Hugo Themes
      </a>
  </li>
  
</ul>






</nav>




  <script>(function(){var a=document.querySelector("aside.book-menu nav");addEventListener("beforeunload",function(b){localStorage.setItem("menu.scrollTop",a.scrollTop)}),a.scrollTop=localStorage.getItem("menu.scrollTop")})()</script>


 
      </div>
    </aside>

    <div class="book-page">
      <header class="book-header">
        
  <div class="flex align-center justify-between">
  <label for="menu-control">
    <img src="/svg/menu.svg" class="book-icon" alt="Menu" />
  </label>

  <strong>Columns</strong>

  <label for="toc-control">
    
    <img src="/svg/toc.svg" class="book-icon" alt="Table of Contents" />
    
  </label>
</div>


  
  <aside class="hidden clearfix">
    
  
<nav id="TableOfContents">
  <ul>
    <li><a href="#columns">Columns</a>
      <ul>
        <li><a href="#example">Example</a></li>
      </ul>
    </li>
  </ul>
</nav>



  </aside>
  
 
      </header>

      
      
  <article class="markdown"><h1 id="columns">
  Columns
  <a class="anchor" href="#columns">#</a>
</h1>
<p>Columns help organize shorter pieces of content horizontally for readability.</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-html" data-lang="html">{{&lt; <span style="color:#f92672">columns</span> &gt;}} <span style="color:#75715e">&lt;!-- begin columns block --&gt;</span>
# Left Content
Lorem markdownum insigne...

&lt;<span style="color:#f92672">---</span>&gt; <span style="color:#75715e">&lt;!-- magic separator, between columns --&gt;</span>

# Mid Content
Lorem markdownum insigne...

&lt;<span style="color:#f92672">---</span>&gt; <span style="color:#75715e">&lt;!-- magic separator, between columns --&gt;</span>

# Right Content
Lorem markdownum insigne...
{{&lt; /<span style="color:#f92672">columns</span> &gt;}}
</code></pre></div><h2 id="example">
  Example
  <a class="anchor" href="#example">#</a>
</h2>
<div class="book-columns flex flex-wrap">
  
  <div class="flex-even markdown-inner">
    <h2 id="left-content">Left Content</h2>
<p>Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
protulit, sed sed aere valvis inhaesuro Pallas animam: qui <em>quid</em>, ignes.
Miseratus fonte Ditis conubia.
  </div>
  
  <div class="flex-even markdown-inner">
    <h2 id="mid-content">Mid Content</h2>
<p>Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter!
  </div>
  
  <div class="flex-even markdown-inner">
    <h2 id="right-content">Right Content</h2>
<p>Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
protulit, sed sed aere valvis inhaesuro Pallas animam: qui <em>quid</em>, ignes.
Miseratus fonte Ditis conubia.
  </div>
  
</div>

</article>
 
      

      <footer class="book-footer">
        
  <div class="flex flex-wrap justify-between">

  



  
    
  
    
  
    
  



<div class="book-languages" tabindex="0" aria-haspopup="true">
  <ul>
    <li class="flex align-center">
      <img src="/svg/translate.svg" class="book-icon" alt="Languages" />
      English
    </li> 
  </ul>

  <ul class="book-languages-list">
    
    <li class="active">
      <a href="https://localhost:1313/" class="flex align-center">
        <img src="/svg/translate.svg" class="book-icon" alt="Languages" />
        English
      </a>
    </li>
    
    <li class="">
      <a href="https://localhost:1313/ru/" class="flex align-center">
        <img src="/svg/translate.svg" class="book-icon" alt="Languages" />
        Russian
      </a>
    </li>
    
    <li class="">
      <a href="https://localhost:1313/zh/" class="flex align-center">
        <img src="/svg/translate.svg" class="book-icon" alt="Languages" />
        Chinese
      </a>
    </li>
    
  </ul>
</div>






  <div>
    <a class="flex align-center" href="https://github.com/alex-shpak/hugo-book/edit/master/exampleSite/content/docs/shortcodes/columns.md" target="_blank" rel="noopener">
      <img src="/svg/edit.svg" class="book-icon" alt="Edit" />
      <span>Edit this page</span>
    </a>
  </div>

</div>

 
        
      </footer>

      
  
  <div class="book-comments">

</div>
  
 

      <label for="menu-control" class="hidden book-menu-overlay"></label>
    </div>

    
    <aside class="book-toc">
      <div class="book-toc-content">
        
  
<nav id="TableOfContents">
  <ul>
    <li><a href="#columns">Columns</a>
      <ul>
        <li><a href="#example">Example</a></li>
      </ul>
    </li>
  </ul>
</nav>


 
      </div>
    </aside>
    
  </main>

  
</body>

</html>












